<template>
  <div class="relative w-full h-full overflow-y-auto">
    <PageHeader
      :title="$t('pointSetting.积分抵现设置')"
      :show-tips-icon="true"
      @tipsIconClick="showTips = !showTips"
    />
    <ul class="tipsRow mb14" v-if="showTips">
      <li>
        {{
          $t("pointSetting.开启积分抵现后，买家下单时可以使用积分抵扣部分现金")
        }}
      </li>
      <li>{{ $t("pointSetting.抵扣的现金结算时平台会支付给商家") }}</li>
    </ul>
    <el-table
      :show-header="false"
      :data="tableData"
      style="width: 100%"
      border
      class="covertable"
      v-loading="loading"
    >
      <el-table-column prop="label" width="200" class-name="label-column">
        <template #default="{ row }">
          {{ $t(`pointSetting.${row.label}`) }}
        </template>
      </el-table-column>
      <el-table-column prop="value">
        <template #default="{ row }">
          <!-- 第一行：开关 -->
          <el-switch
            v-if="row.type === 'switch'"
            v-model="configData[row.key]"
            @change="handleSwitchChange"
            :active-value="1"
            :inactive-value="0"
          />
          <!-- 第二行：数字输入框 -->
          <div v-else-if="row.type === 'number'" style="width: 300px">
            <el-input-number
              v-model="configData[row.key]"
              :min="row.min"
              :max="row.max"
              @change="handleNumberChange"
              style="width: 100%"
              controls-position="right"
              :disabled="row.key === 'pointConsumeRate'"
            />
            <div class="tips-text mt8">{{ $t(`pointSetting.${row.tips}`) }}</div>
          </div>
          <!-- 第三行：按钮 -->
          <div v-else-if="row.type === 'button'">
            <el-button type="primary" @click="handleSave">
              {{ $t("pointSetting.保存") }}
            </el-button>
            <div class="tips-text color-red mt8">{{ $t(`pointSetting.${row.tips}`) }}</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const showTips = ref(true);
const tableData = ref([
  {
    label: "积分抵现开关",
    type: "switch",
    key: "pointConsumeEnable",
  },
  {
    label: "积分换算比例",
    type: "number",
    max: 999999999999999999,
    min: 0,
    tips: "用户下单使用积分时换算成人民币的比例，100个积分当做1元钱使用。",
    key: "pointConsumeRate",
  },
  {
    label: "最高抵现比例",
    type: "number",
    max: 90,
    min: 0,
    // tips: `${t("pointSetting.最高抵扣金额不会超过商品最终总金额")} x ${t(
    //   "pointSetting.最高抵扣上限百分比"
    // )}，${t("pointSetting.只抵扣整数例如")}：${t(
    //   "pointSetting.商品金额为200元"
    // )}，${t("pointSetting.最高抵扣上限为90%")}，${t(
    //   "pointSetting.则积分最多可抵扣180元"
    // )}`,
    tips: "最高抵扣金额不会超过商品最终总金额 x 最高抵扣上限百分比，只抵扣整数例如：商品金额为200元，最高抵扣上限为90%，则积分最多可抵扣180元",
    key: "pointConsumeOccupyRate",
  },
  {
    label: "积分最低使用金额",
    type: "number",
    max: 999999999999999999,
    min: 0,
    tips: "订单金额达到积分最低使用金额后，才可以使用积分抵扣现金",
    key: "pointConsumeTotalLimit",
  },
  {
    label: "操作",
    type: "button",
    tips: "以上内容修改，点击保存后生效",
  },
]);
const loading = ref(false);

const configData = ref({});

const handleSwitchChange = (val) => {
  // if (val !== configData.value.pointConsumeEnable) {
  //   Api.saveConfig({
  //     pointConsumeEnable: val,
  //   }).then((res) => {
  //     const { status } = res;
  //     if (status === 200) {
  //       ElMessage.success("保存成功!");
  //       getConfig();
  //     }
  //   });
  // }
};

const handleNumberChange = (val) => {};

const handleSave = () => {
  Api.saveConfig({
    pointConsumeEnable: configData.value.pointConsumeEnable,
    pointConsumeRate: configData.value.pointConsumeRate,
    pointConsumeOccupyRate: configData.value.pointConsumeOccupyRate,
    pointConsumeTotalLimit: configData.value.pointConsumeTotalLimit,
  }).then((res) => {
    const { status } = res;
    if (status === 200) {
      ElMessage.success(t("pointSetting.保存成功"));
      getConfig();
    }
  });
};

const getConfig = () => {
  loading.value = true;
  Api.getConfig({})
    .then((res) => {
      const { data, status } = res;
      configData.value = data || {};
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  getConfig();
});
</script>
<style lang="scss" scoped>
.tipsRow {
  width: 100%;
  margin-top: 10px;
  padding: 10px 15px;
  border-radius: 4px;
  background: rgba(255, 126, 40, 0.07);
  color: #ff7e28;
  font-size: 12px;
  li {
    padding: 2px 0;
    color: #db5609;
    font-size: 12px;
  }
}
.covertable {
  .el-table__cell {
    padding: 12px 0;
  }

  :deep(.label-column) {
    .cell {
      text-align: right;
    }
  }
}

.tips-text {
  color: #00000073;
  font-size: 12px;
}
.color-red {
  color: #ff7e28;
}
</style>
